<f:layout name="DocHeader" />
<f:section name="Content">
	<f:flashMessages />
	<f:if condition="{url}">
		<div class="viewpage-item">
			<div class="viewpage-topbar t3js-viewpage-topbar">
				<div class="viewpage-topbar-orientation t3js-viewpage-topbar-orientation">
					<a href="#" class="t3js-change-orientation">
						{icons.orientation -> f:format.raw()}
					</a>
				</div>
				<div class="viewpage-topbar-preset">
				<span class="dropdown">
					<button class="dropdown-toggle" type="button" id="viewpage-topbar-preset-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
						<span class="t3js-viewpage-current-label">
							{current.label}
						</span>
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" aria-labelledby="viewpage-topbar-preset-button">
						<li role="separator" class="divider"></li>
						<li>
							<a href="#" class="t3js-preset-maximized t3js-change-preset" data-key="maximized" data-label="{f:translate(key: 'maximized')}" data-width data-height>
								<span class="viewpage-preset-item">
									<span class="viewpage-preset-item-icon">{icons.fullscreen -> f:format.raw()}</span>
									<span class="viewpage-preset-item-label">
										{f:translate(key: 'maximized')}
									</span>
									<span class="viewpage-preset-item-size">
										100%/100%
									</span>
								</span>
							</a>
						</li>
						<li>
							<a href="#" class="t3js-preset-custom t3js-change-preset" data-key="custom" data-label="{f:translate(key: 'custom')}" data-width="{custom.width}" data-height="{custom.height}">
								<span class="viewpage-preset-item">
									<span class="viewpage-preset-item-icon">{icons.expand -> f:format.raw()}</span>
									<span class="viewpage-preset-item-label t3js-preset-custom-label">
										{f:translate(key: 'custom')}
									</span>
									<span class="viewpage-preset-item-size">
										<span class="t3js-preset-custom-width">{custom.width}</span>px/<span class="t3js-preset-custom-height">{custom.height}</span>px
									</span>
								</span>
							</a>
						</li>

						<f:for each="{presetGroups}" as="presetGroup" iteration="presetGroupIteration">
							<f:if condition="{presetGroup}">
								<li role="separator" class="divider"></li>
								<f:for each="{presetGroup}" as="preset">
									<li>
										<a href="#" class="t3js-change-preset" data-key="{preset.key}" data-label="{preset.label}" data-width="{preset.width}" data-height="{preset.height}">
											<span class="viewpage-preset-item">
												<span class="viewpage-preset-item-icon">{icons.{preset.type} -> f:format.raw()}</span>
												<span class="viewpage-preset-item-label">{preset.label}</span>
												<span class="viewpage-preset-item-size">
													{f:if(condition: preset.width, then: '{preset.width}px', else: '100%')}/{f:if(condition: preset.height, then: '{preset.height}px', else: '100%')}
												</span>
											</span>
										</a>
									</li>
								</f:for>
							</f:if>
						</f:for>
					</ul>
				</span>
				</div>
				<div class="viewpage-topbar-size">
					<input class="t3js-viewpage-input-width" type="number" name="width" min="300" max="9999" value="{current.width}">
					x
					<input class="t3js-viewpage-input-height" type="number" name="height" min="300" max="9999" value="{current.height}">
				</div>
			</div>
			<div class="viewpage-resizeable t3js-viewpage-resizeable" style="width:{current.width}px;height:{current.height}px;">
				<iframe src="{url}" width="100%" height="100%" id="tx_viewpage_iframe" frameborder="0" border="0"></iframe>
			</div>
		</div>
	</f:if>
</f:section>
